﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #message-container {
            border: 1px solid #ccc;
            height: 300px;
            overflow-y: scroll;
            margin-bottom: 10px;
            padding: 10px;
        }
        #message-input {
            width: 70%;
            padding: 8px;
        }
        button {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:disabled {
            background-color: #cccccc;
        }
        .status {
            margin: 10px 0;
            padding: 5px;
            border-radius: 3px;
        }
        .connected {
            background-color: #dff0d8;
            color: #3c763d;
        }
        .disconnected {
            background-color: #f2dede;
            color: #a94442;
        }

    </style>
</head>
<body>
<h1>WebSocket 示例</h1>

<div id="status" class="status disconnected">未连接</div>
<label for='ws-addr'></label><input type='text' value='ws://127.0.0.1:9040/websocket' class="status disconnected" style='width:400px' id='ws-addr'/>
<div id="message-container"></div>

<div>
    <label for="message-input"></label><input type="text" id="message-input" placeholder="输入消息..."/>
    <button id="send-button" disabled>发送</button>
    <button id="connect-button">连接</button>
    <button id="disconnect-button" disabled>断开</button>
</div>
<script>
    // WebSocket 变量
    let socket;
    const messageContainer = document.getElementById('message-container');
    const messageInput = document.getElementById('message-input');
    const sendButton = document.getElementById('send-button');
    const connectButton = document.getElementById('connect-button');
    const disconnectButton = document.getElementById('disconnect-button');
    const statusDiv = document.getElementById('status');

    // 连接WebSocket服务器
    function connect() {
        // 这里使用wss://echo.websocket.org作为示例服务器
        // 实际项目中应该替换为你自己的WebSocket服务器地址

        const wsAddr = document.getElementById("ws-addr").value;

        if (wsAddr === '') {
            alert("请填写websocket的地址");
            return false;
        }

        socket = new WebSocket(wsAddr);

        // 连接成功时
        socket.onopen = function(e) {
            addMessage('连接已建立');
            statusDiv.textContent = '已连接';
            statusDiv.className = 'status connected';
            sendButton.disabled = false;
            connectButton.disabled = true;
            disconnectButton.disabled = false;
        };

        // 收到消息时
        socket.onmessage = function(event) {
            addMessage('收到: ' + event.data);
        };

        // 连接关闭时
        socket.onclose = function(event) {
            if (event.wasClean) {
                addMessage(`连接已关闭，代码=${event.code} 原因=${event.reason}`);
            } else {
                addMessage('连接中断');
            }
            statusDiv.textContent = '未连接';
            statusDiv.className = 'status disconnected';
            sendButton.disabled = true;
            connectButton.disabled = false;
            disconnectButton.disabled = true;
        };

        // 发生错误时
        socket.onerror = function(error) {
            addMessage(`错误: ${error.message}`);
        };
    }

    // 断开WebSocket连接
    function disconnect() {
        if (socket) {
            socket.close();
        }
    }

    // 发送消息
    function sendMessage() {
        const message = messageInput.value;
        if (message && socket.readyState === WebSocket.OPEN) {
            socket.send(message);
            addMessage('发送: ' + message);
            messageInput.value = '';
        }
    }

    // 添加消息到消息容器
    function addMessage(message) {
        const messageElement = document.createElement('div');
        messageElement.textContent = message;
        messageContainer.appendChild(messageElement);
        messageContainer.scrollTop = messageContainer.scrollHeight;
    }

    // 事件监听
    connectButton.addEventListener('click', connect);
    disconnectButton.addEventListener('click', disconnect);
    sendButton.addEventListener('click', sendMessage);

    // 按Enter键发送消息
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });
</script>
</body>
</html>